<template>
  <div class="chart-view">
    <div v-show="dataLen" ref="lineChartRef" class="chart-box"></div>
    <Empty v-show="!dataLen" />
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeUnmount, computed } from "vue";
import type { ResultItem } from "../../api/calibration/index.d";
import * as echarts from "echarts";
import { chartMap, type TypeKeys } from "../index";
let lineChart = null as any;

defineOptions({
  name: "ChartView",
  components: {}
});
const props = withDefaults(defineProps<{ currentKey: TypeKeys }>(), {
  currentKey: "antennafactor"
});
const config = computed(() => chartMap[props.currentKey as keyof typeof chartMap] || {});
const lineChartRef = ref<HTMLElement>();
const dataLen = ref(0);
onBeforeUnmount(() => {
  window.removeEventListener("resize", chartResize);
});
onMounted(async () => {
  nextTick(() => {
    initEchart();
  });
});
const initEchart = () => {
  lineChart = echarts.init(lineChartRef.value);
  lineChart.setOption(getChartJson());
  window.addEventListener("resize", chartResize);
};
const chartResize = () => {
  lineChart.resize();
};
const drawChart = (data: ResultItem[]) => {
  dataLen.value = data.length;
  lineChart.clear();
  lineChart.setOption(getChartJson(data));
  nextTick(() => {
    chartResize();
  });
};
/**
 * @description: 获取图表的配置
 * @param {*} data
 * @return {*}
 */
const getChartJson = (data: ResultItem[] = []) => {
  return {
    grid: {
      top: 50,
      left: 60,
      right: 20,
      bottom: 40
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#3A6EF6",
          width: 2
        }
      },
      // triggerOn: "click",
      className: "adjust-tooltip-box",
      textStyle: {
        color: "#1d2129",
        fontSize: 12
      },
      padding: 8,
      formatter: (vals: any) => {
        const { value, axisValue, seriesName } = vals[0];
        return `<div class="tit">${axisValue}</div>
          <div class="name-val">
            <span class="name">${seriesName}</span>
            <span class="val">${value}</span>
          </div>`;
      }
    },
    xAxis: {
      type: "category",
      name: config.value.xKey?.name,
      nameTextStyle: {
        padding: [-20, 0, 0, -60],
        color: "#666",
        verticalAlign: "top"
      },
      boundaryGap: false,
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#ddd"
        }
      },
      axisLabel: {
        color: "#999"
        // interval: 4
      },
      data: data.map((item) => item[config.value.xKey?.prop as keyof ResultItem])
    },
    yAxis: {
      type: "value",
      name: config.value.yKey?.name,
      nameTextStyle: {
        padding: [0, 0, 5, 0]
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#ddd"
        }
      },
      axisLabel: {
        color: "#999"
      }
    },
    series: [
      {
        type: "line",
        data: data.map((item) => item[config.value.yKey?.prop as keyof ResultItem]),
        symbolSize: 12,
        name: config.value.yKey?.name,
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: "#13DAF1" },
              { offset: 1, color: "#3A6EF6" }
            ],
            global: false
          }
        },
        itemStyle: {
          color: "#3A6EF6",
          borderWidth: 2,
          borderColor: "#3A6EF6",
          opacity: 0
        },
        emphasis: {
          itemStyle: {
            opacity: 1
          }
        }
      }
    ]
  };
};
defineExpose({ chartResize, drawChart });
</script>
<style scoped lang="scss">
.chart-view {
  width: 100%;
  height: 100%;
  .chart-box {
    width: 100%;
    height: 100%;
  }
  .el-empty {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.adjust-tooltip-box {
  background: linear-gradient(321deg, rgba(253, 254, 255, 0.9) 0%, rgba(244, 247, 252, 0.9) 100%) !important;
  .tit {
    font-weight: 600;
  }
  .name-val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 142px;
    height: 32px;
    line-height: 32px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);
    border-radius: 4px;
    margin-top: 4px;
    padding: 0 10px;
    .name {
      color: #4e5969;
    }
  }
}
</style>
